<template>
	<view class="allocate-daetails-vison wf-box">
		<HeadNav :navBarHeight="navBarHeight" backGround="transparent"></HeadNav>
		
		<view class="daetails-head" :style="{ paddingTop: navBarHeight }">
			<image class="invite-icon" src="../../static/img/invite-icon.png" mode=""></image>
			<view class="name">
				邀请好友，加入Ctalk
			</view>
		</view>


		<view class="invite-view">
			<view class="name">
				我的邀请码
			</view>
			<view class="tips-text">
				暂未激活邀请码，绑定后激活
			</view>
			<button class="copy-code-btn">复制邀请码</button>
			<view class="default-code-view">
				<text class="name">我的邀请人</text>
				<text class="default-code">使用默认邀请码</text>
			</view>
			<view class="code-ipt-view">
				<input class="code-ipt" type="text" />
				<button class="bind-btn">绑定</button>
			</view>
		</view>

		<view class="data-view">
			<view class="data-title">
				数据概览
			</view>
			<view class="data-ul">
				<view class="data-li" v-for="(item,index) in dataList">
					<view class="">
						{{item.value}}
					</view>

					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <button class="KT-participant-btn">获取节点</button> -->
	</view>
</template>

<script>
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				Info: {
					plan: 10,
					openTime: '2024-03-28 14:00',
					bonusTotal: 5000000,
					balance: 89
				},
				capitalOptList: [{
						text: '预售数量',
						value: '20'
					},
					{
						text: '价格',
						value: '100,000.00KT'
					},
					{
						text: '期数',
						value: '第 1 期'
					},
				],
				dataList: [{
						value: 0,
						name: '团队好友总数'
					},
					{
						value: 0,
						name: '我的邀请'
					},
				]

			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin main-view {
		width: 92%;
		margin-left: 4%;

		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.wf-box {
		overflow: hidden;
		padding-bottom: 80rpx;
	}

	.daetails-head {
		width: 100%;
		// margin-top: 96rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 460rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.invite-icon {
			width: 350rpx;
			height: 350rpx;
			margin-top: 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
	}



	.capital-view {
		@include main-view;

		.capital-head {
			@include flex-between;
			justify-content: flex-start;

			.allocate-icon {
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
			}

			.title {
				font-size: 34rpx;
				color: #333333;
			}

			.openTime {
				font-size: 25rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}

		.capital-opt-ul {
			@include flex-between;
			margin-top: 34rpx;

			.capital-opt-li {
				.text {
					font-size: 25rpx;
					color: #999999;
				}

				.value {
					font-size: 29rpx;
					color: #333333;
					margin-top: 14rpx;
				}
			}
		}

		.bonus-view {
			@include flex-between;
			margin: 40rpx 0 20rpx;
			font-size: 24rpx;
			color: #999999;


			.plan {}

			.bonusTotal {}
		}
	}

	.data-view {
		@include main-view;
		margin-top: 30rpx;

		.data-title {
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}

		.data-ul {
			display: flex;
			justify-content: space-between;

			.data-li {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;

				margin-top: 40rpx;

				.name {
					font-size: 24rpx;
					color: #333333;
					text-align: center;
				}
			}
		}

	}




	.invite-view {
		@include main-view;
		.name {
			font-size: 28rpx;
			color: #333333;
		}

		.default-code-view,
		.code-ipt-view {
			@include flex-between;
		}
		
		.code-ipt-view {
			margin-top: 20rpx;
		}
		
		

		.tips-text {
			width: 625rpx;
			height: 84rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 24rpx;
			color: #999999;
			margin: 20rpx 0 30rpx;
		}

		.copy-code-btn {
			width: 625rpx;
			height: 84rpx;
			background: #3F93FF;
			border-radius: 6rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}

		.bind-btn {
			width: 150rpx;
			height: 84rpx;
			background: #3F93FF;
			border-radius: 6rpx;
			color: #fff;
			margin: 0;
		}

		.default-code {
			font-size: 24rpx;
			color: #58A1FF;
		}

		.code-ipt {
			width: 440rpx;
			height: 84rpx;
			background: #EBF3FF;
			border-radius: 6rpx;
			
		}
	}


	::v-deep {
		.uni-progress-bar {

			border-radius: 8px !important;
			overflow: hidden;
		}
	}
</style>